<template>
	<view class="content">
		<!-- 头部 -->
		<view class="helmet">
			<view class="tome">
				<view class="to_snum">

				</view>
			</view>
		</view>
			<u-form :model="form" ref="uForm" :label-width="280" :error-type="errorType">
		<view class="per_info">
				<u-form-item label="头像" prop="photo">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="5"
						multiple
						:maxCount="1"
					></u-upload>
				</u-form-item>
				<u-form-item label="用户名(不可修改)" prop="name">
					<u-input  placeholder="请填写用户名" input-align="right" v-model="form.name" />
				</u-form-item>
				<u-form-item label="手机" prop="phone">
					<u-input  placeholder="请填写手机" input-align="right" v-model="form.phone" />
				</u-form-item>
				<u-form-item label="地区" prop="region">
					<u-input input-align="right" placeholder="请选择地区" v-model="form.region" type="select"  @click="regshow = true"/>
				</u-form-item>
				<u-form-item label="二维码(不可修改)" prop="QRcode">
					<u-input  placeholder="请填写用户名" input-align="right" v-model="form.QRcode" />
				</u-form-item>
				
				</view>
				<view class="per_info per_info1">
					<u-form-item label="生日" prop="birthday">
						<u-input input-align="right" placeholder="请选择生日" v-model="form.birthday" type="select"  @click="birtshow = true"/>
					</u-form-item>
					<u-form-item label="性别" prop="sex">
						<u-input input-align="right" placeholder="请选择性别" v-model="form.sex" type="select"  @click="sexshow = true"/>
					</u-form-item>
				</view>
				
				<view class="per_info per_info2">
					<u-form-item label="简介" prop="sex" label-position="top">
						<u-input count placeholder="请填写简介" :height="200" :auto-height="true" v-model="form.sex" :border="false" :maxlength="100" type="textarea"/>
					</u-form-item>
				</view>
			<u-button @click="submit">保存</u-button>
		
			</u-form>
		<u-action-sheet :list="actionSheetList" v-model="sexshow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="time" v-model="birtshow" @confirm="birtfirm" :params="params"></u-picker>
		<u-picker mode="region" v-model="regshow" @confirm="regfirm" :area-code='areaCode'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['border-bottom'],
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				form: {
					name: '',
					intro: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				},
				sexshow: false,
				actionSheetList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				birtshow: false,
				regshow:false,
				areaCode:[]
				
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			actionSheetCallback(index) {
				this.form.sex = this.actionSheetList[index].text;
			},
			birtfirm(row){
				console.log(row,'生日')
			},
			regfirm(row){
				console.log(row,'地区')
				this.areaCode=row
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background: #fafafa;
		position: relative;
		.helmet {
			position: relative;
			width: 100%;
			z-index: 9;
			background: #fafafa;

			.tome {
				position: relative;
				z-index: 1;
				background-color: $maincolor;
				box-sizing: border-box;
				padding: 0 44rpx;

				.to_snum {
					padding: 12rpx 0 140rpx 0;
				}

			}
		}
		.per_info{
			position: relative;
			z-index: 10;
			box-sizing: border-box;
			background: #FFFFFF;
			padding: 0rpx 40rpx 20rpx 40rpx;
			border-radius: 12rpx;
			margin: 0 20rpx;
			margin-top: -90rpx;
			/deep/ .u-preview-wrap{
				width: 120rpx !important;
				height: 120rpx !important;
				border-radius: 50%;
			}
			/deep/ .u-upload{
				justify-content: flex-end;
			}
		}
		.per_info1{
			margin: 20rpx 20rpx;
		}
		.per_info2{
			margin-top: 20rpx;
		}
	}
</style>
